<template>
    <div class="img_big" v-show=" masking"  @mousewheel.stop="handler">
        <p class="left" @click="img_l"> &lt; </p>
        <span  class="quit" @click="quit">x</span>
        <img :src="maskingImg[index_i].path" alt="" class="pictureDisplay">
        <p class="right" @click="img_r"> &gt; </p>
    </div>
</template>

<script>
export default {
    name: "ImageViewing",
    props:['masking',"index","maskingImg"],
    data(){
        return{
            handler:"",
            index_i:"",
            img_:"",
        }
    },
    mounted() {
        this.index_i = this.index;
        this.img_ = this.maskingImg;
        console.log(this.img_)
        this.handler = this.mouseHandler;
    },
    watch:{
    },
    methods:{
        _masking(item,index){
            this.masking = true;
            this.pictureDisplay=item;
            this.index=index;
        },
        quit(){
            let body =document.body;
            body.style.overflow='auto';
            this.maskings = false;
            this.$emit('dis',false);

        },
        img_l(){
            if(this.index===0){
                this.$store.commit("requestInfo","已经是第一张图片");
            }else {
                this.index-=1;
                this.pictureDisplay = this.imgList[this.index].path;
            }
        },
        img_r(){
            if(this.index===this.imgList.length-1){
                this.$store.commit("requestInfo","已经是最后一张图片");
            }else {
                this.index+=1;
                this.pictureDisplay = this.imgList[this.index].path;
            }
        },
        mouseHandler(){
            this.handler = "";
            let box = document.querySelector(".img_big")
            box.onmousewheel=(e)=>{
                this.times = false;
                if(e.wheelDelta<0){
                    console.log(e.wheelDelta)
                    if(this.index===this.imgList.length-1){
                        return;
                    }else {
                        this.index+=1;
                        this.pictureDisplay = this.imgList[this.index].path;
                    }
                }else if(e.wheelDelta>0){
                    if(this.index===0){
                        return;
                    }else {
                        this.index-=1;
                        this.pictureDisplay = this.imgList[this.index].path;
                    }

                }
            }
            setInterval(()=>{
                this.handler = this.mouseHandler;
            },2000)
        }
    }
}
</script>

<style scoped>
.img_big{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height:100vh;
    z-index: 9999;
    background: rgba(239, 243, 239, 0.5);
    overflow: auto;

}
.quit{
    display: flex;
    justify-content:center;
    align-items: center;
    width: 50px;
    height: 50px;
    font-size: 20px;
    position: absolute;
    top:5%;
    right:5%;
    color: white;
    cursor: pointer;
    background: #c2bdbd;
    border-radius: 50%;
}
.quit:hover{
    opacity: .8;
}
@media (min-width:0px) and (max-width: 820px) {
    .title,.content{
        width: 430px;
    }
    .title li:nth-child(6n+1){
        margin-left: 16.6px;
    }
    .title li{
        margin-left: 16.6px;
    }
    .title li:nth-child(4n+1){
        margin-left: 0;
    }
}
.pictureDisplay{
    max-width: 1200px;
    aspect-ratio: 16/9;
}
.left,.right{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fcf8f8;
    font-size: 25px;
    font-weight: bolder;
    background: #8a8282;
    border-radius: 50%;
    cursor: pointer;
}
.left:hover,.right:hover{
    opacity: .9;
}
</style>